<template>
	<div style="height:100%">
		<my-menu :menuVisi="menuVisi"></my-menu>
		<x-header>
			<span>WINTER FM</span>
      <x-icon slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;" @click="toggleMenu"></x-icon>
		</x-header>
		<!-- <ul class="song-lists" >
			<li v-for="item in songLists">{{ item.name }}</li>
		</ul> -->
		<audio :src="currentAudio.url" autoplay="true" id="my-audio" @ended="getRandomAudio"></audio>
		<div class="playState">
			<div class="bg-wrap">
				<img :src="currentAudio.blurCover" alt="" class="media-bg">	
			</div>
			
			<div class="cd-wrap">
				<img :src="currentAudio.cover" alt="" class="media-cd">
				<p class="song-name">{{ currentAudio.name }}</p>
				<p class="singer-name">{{ currentAudio.singer }}</p>
				<!-- <box gap="10px">
		      <x-progress :percent="percent2" :show-cancel="false"></x-progress>
		    </box> -->
		    
			</div>

			<div class="btn-wrap">
		  	<i class="iconfont" v-if="playState" @click="changePlayState('play')">&#xe624;</i>
		  	<i class="iconfont" v-if="!playState" @click="changePlayState('pause')">&#xe629;</i>
		  	<i class="iconfont" @click="getRandomAudio">&#xe879;</i>
		  </div>



		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import myMenu from '../commonCell/menu'
	import { TransferDom,Popup,XHeader,Card,AjaxPlugin,XProgress,Box } from 'vux'
	Vue.use(AjaxPlugin)

	export default {
	  name: 'Home',
	  data(){
	  	return {
	  		menuVisi:false,
	  		userId:'',
	  		// percent2:30, 
	  		playState:0,
	  		currentAudio:{
	  			url:'',
	  			singer:'',
	  			cover:'',
	  			blurCover:'',
	  			name:'',
	  			album:'',
	  			id:''
	  		}
	  	}
	  },
	  mounted:function(){
	  	let oThis = this;
	  	this.userId = JSON.parse(localStorage.userMsg).userId;
	  	oThis.$http({
				url:`${Vue.config.API_GET_HEADER}login/refresh`,
				method: 'GET'
			}).then(function (res) {

					// console.log(res);
					oThis.$http({
					 url:`${Vue.config.API_GET_HEADER}user/detail?uid=${oThis.userId}`,
					 method: 'GET'
					}).then(function (response) {
					 // console.log(response);
					 oThis.getRandomAudio();
					 
				});
			}) 	
	  },
	  methods:{
	  	toggleMenu:function(){
	  		this.menuVisi = !this.menuVisi
	  	},
	  	getMediaUrl:function($id){
	  		let oThis = this;
	  		this.$http({
						 url:`${Vue.config.API_GET_HEADER}music/url?id=${$id}`,
						 method: 'GET'
					 }).then(function (_res) {
							 // _this.songLists = response.data.playlists;
							oThis.currentAudio.url = _res.data.data[0].url;
							 // return _res.data.data[0].url;
					 })
	  	},
	  	changePlayState:function(type){
	  		if(type==='pause') document.getElementById('my-audio').pause();
	  		else document.getElementById('my-audio').play();
	  		this.playState = !this.playState
	  	},
	  	// getNewsongs:function($id){//新歌曲读取
	  	// 	this.$http({
				// 	url:`${Vue.config.API_GET_HEADER}song/detail?ids=${$id}`,
				// 	method: 'GET'
				// }).then(function (_res) {
				// 		// _this.songLists = response.data.playlists;
				// 		console.log(_res);
				// })
	  	// },
	  	getRandomAudio:function(){
	  		let oThis = this;
	  		this.$http({
					 url:`${Vue.config.API_GET_HEADER}personal_fm`,
					 method: 'GET'
				 }).then(function (_res) {
						 // _this.songLists = response.data.playlists;
						 // oThis.songLists = _res.data.data;
						 // console.log(_res.data.data[0]);
						 let result = _res.data.data[0];
						 // oThis.currentAudioId = _res.data.data[0].id;
						 // oThis.nextAudioId = _res.data.data[1].id;
						 // oThis.getNewsongs(oThis.currentAudioId);
						 // oThis.getMediaUrl(oThis.songLists[0].id);
						 oThis.currentAudio.name = result.name;
						 oThis.currentAudio.singer = result.artists[0].name;
						 oThis.currentAudio.cover = result.album.picUrl;
						 oThis.currentAudio.blurCover = result.album.blurPicUrl;
						 oThis.currentAudio.id = result.id;
						 // oThis.getMediaUrl(result.id);
						 oThis.getMediaUrl(result.id);
						 oThis.playState = 0;
						 // console.log(oThis.currentAudio.url)
				 })
	  	}

	  },
	  components:{
	  	XHeader,
	  	Card,
	  	myMenu,
	  	XProgress,
    	Box
	  }
	}
</script>

<style scoped>
	.playState{
		width:100%;height:100%;	
		overflow:hidden;
		position: relative;
	}
	.bg-wrap{
		position: absolute;
		width:100%;
		height:100%;
		text-align: center;
	}

	.media-bg{
		height:120%;
		width:auto;
		-webkit-filter: blur(15px) brightness(20%); /* Chrome, Safari, Opera */
    filter: blur(15px) brightness(20%);
    margin:-10% 0 0 -10%;
	}

	.cd-wrap{
		position: absolute;
		width:100%;
		top:5rem;
	}
	.cd-wrap .media-cd{
		width:7rem;
	}
	.cd-wrap p{
		color:#cecece;
		margin:.4rem 0;
	}
	.cd-wrap p.singer-name{
		font-size:.6rem;
	}
	.btn-wrap{
		position: fixed;
		width:100%;
		bottom:1.5rem;
		color:#cecece;
		
	}
	.btn-wrap i{
		font-size: 3rem;
		position: absolute;
		bottom:0;
	}
	.btn-wrap i:nth-child(1){
		left: 1rem;
	}
	.btn-wrap i:nth-child(2){
		right:1rem;
	}
</style>